<template>
  <div class="app-container">
    <div class="filter-container filter-container-left">
      <el-form class="form_search" :inline="true" label-width='90px'>
        <el-form-item label="规则名称：">
          <el-input v-model="queryParam.name" placeholder="请输入规则名称" clearable class="filter-item form-search-input" />
        </el-form-item>
        <el-form-item label="奖励对象：">
          <el-select v-model="queryParam.obj_type" placeholder="请选择奖励对象" class="filter-item form-search-input-small">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item search" type='primary' icon="el-icon-search" @click="handleSearch">查询</el-button>
          <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
          <el-button class="filter-item" type="warning" icon="el-icon-plus" @click="addRule">添加奖励规则</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='60' align='center'/> -->
      <el-table-column prop="name" label="规则名称" align='center'/>
      <el-table-column label="奖励对象" align='center'>
        <template slot-scope="item">
          {{item.row.obj_type==1?'个人':'企业'}}
        </template>  
      </el-table-column>
      <el-table-column label="奖励类型" align='center'>
        <template slot-scope="item">
          <p v-for="(r,index) in item.row.type_data" :key='index'>{{getType(r.type)}}</p>
        </template>  
      </el-table-column>
      <el-table-column label="奖励金额" align='center'>
        <template slot-scope="item">
          <p v-for="(r,index) in item.row.type_data" :key='index'>{{r.money}}元</p>
        </template>  
      </el-table-column>
      <el-table-column label="起始时间" align='center' width='280px'>
        <template slot-scope="item">
          <p>{{getDate(item.row.start_time)}}至{{getDate(item.row.end_time)}}</p>
        </template>
      </el-table-column>
      <el-table-column label="启用状态" align='center'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.enable"
            :active-value="1"
            :inactive-value="0"
            :active-text="item.row.enable==1?'已启用':'已禁用'"
            @change="updateItem(item.row,'enable')"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" @click="edit(item.row.id)" :underline="false"><i class="iconfont icon-bianji"></i>编辑</el-link>
          <el-link type="danger" class="table_btn" @click="handleDelete(item.row.id)" :underline="false"><i class="iconfont icon-lajitong1"></i>删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
  </div>
</template>

<script>
import {parseTime} from '@/utils/index'
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/promotion/admin/inviteNew',
      queryParam: {
        name: '',
        obj_type:'',
        page:1,
        page_size:10
      },
      defaultQueryParam:['page','page_size'],
      optionsType:[
        {label:'个人',value:'1'},
        {label:'企业',value:'2'}
      ],
      actionList:[
        {label:'注册',value:'1'},
        {label:'发布简历',value:'2'},
        {label:'企业认证',value:'3'},
        {label:'发布职位',value:'4'}
      ],
    }
  },
  mounted() {
    
  },
  methods: {
    // 获取奖励类型
    getType(type) {
      let idx = this.actionList.findIndex(res=>{
        return res.value == type
      })
      return this.actionList[idx].label
    },
    // 根据时间戳获取时间
    getDate(t) {
      return parseTime(t)
    },
    // 添加规则
    addRule() {
      this.$router.push({path:'/activity/addInvite'})
    },
    // 修改规则
    edit(id) {
      this.$router.push({path:'/activity/addInvite',query:{id:id}})
    },
    // 修改启用状态
    updateItem(item,key) {
      let param = {
        request_type:2
      }
      param[key] = item[key]
      this.$http.put(this.url + '/' + item.id,param).then((response) => {
        this.handleResponse(response)
      })
    }
  }
}
</script>